
const { resolve } = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'dist'),
        library: 'webDoc'
    },
    module: {
        rules: [
            // loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader, // 单独提取css文件并压缩css  生产环境使用该loader替换style-loader 
                    // 'style-loader', // 把 CSS 插入到 DOM 中  将js文件中内嵌的样式 插入到dom的style中 开发环境建议使用这个，生产环境不建议使用这个loader
                    'css-loader',    // 将css文件转为字符串内嵌进对应的js文件
                    {   // css兼容性处理  兼容性处理的配置在package.json中配置browserslist属性  配置属性请百度
                        /**
                         * "browserslist": {
                                "development": [
                                    "last 1 chrome version",
                                    "last 1 firefox version",
                                    "last 1 safari version"
                                ],
                                "production": [
                                    ">1%",
                                    "not dead",
                                    "not op_mini all"
                                ]
                            }
                         */
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: ['postcss-preset-env']
                            }
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    /**
                     *  js 兼容性处理 
                     *      1. babel-loader 普通的语法转换 es6->es5
                     *      2. @babel/polyfill 高级语法转换需要用到  这个在代码中引入即可  这个把所有js兼容性处理都包含进来了，打包体积变大
                     *      3. core-js  按需做兼容性处理
                     */
                    loader: 'babel-loader',
                    options: {
                        // 启用缓存，默认false。 提高再次构建速度，只会重新编译修改的文件
                        cacheDirectory: true,
                        presets: [[
                            '@babel/preset-env', {
                                // 按需加载
                                "useBuiltIns": "usage",
                                // 指定core-js版本
                                "corejs": {
                                    "version": 3
                                },
                                // 指定兼容性做到哪一个版本浏览器
                                "targets": {
                                    "chrome": "60",
                                    "firefox": "60",
                                    "ie": "11",
                                    "edge": "17",
                                    "safari": "10"
                                }
                            }
                        ]]
                    }
                }]
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        // 压缩CSS
        new CssMinimizerWebpackPlugin()
    ],
    devtool: 'nosources-source-map',
    mode: 'production',
    externals: {
      lodash: {
        commonjs: 'lodash',
        commonjs2: 'lodash',
        amd: 'lodash',
        root: '_',
      },
    },

    devServer: { // 更多配置项https://webpack.docschina.org/configuration/dev-server/
        compress: true,
        static: {
            directory: resolve(__dirname, 'public')
        },
        client: {
            progress: true, // 编译进度
            overlay: true, // 当出现编译错误或警告时，在浏览器中显示全屏覆盖
        },
        port: 8000,
        open: false, // 启动后自动用默认浏览器打开页面
        hot: false, // 热替换 only true false。启用热模块替换功能，在构建失败时不刷新页面作为回退，使用 hot: 'only'

    }
}